<template>
  <continer
    :showPage="showPage"
    :shadow="true"
    :pageshadow="true"
    :isNoTabs="true"
  >
    <template slot="search">
      <QuickSearch
        :advForm="quickSearchForm"
        @QuickSearch="handleSearchFun"
      ></QuickSearch>
    </template>
    <template slot="oprate">
      <el-button type="primary" size="mini" @click="handleSearchFun"
        >查询</el-button
      >
      <el-button
        size="mini"
        @click="addBtnFun"
        v-functions="['service_item_mgt_category_insert']"
        >新增</el-button
      >
    </template>
    <template slot="content">
      <instiutionTable
        ref="tableRef"
        @currentChange="currentChangeFun"
        @sizeChange="sizeChange"
        :pages="tablePages"
        :instiutionTableData="tableData"
        :instiutionTableHeader="tableHeader"
      >
      </instiutionTable>
      <!-- 新建仓库抽屉 -->
      <drawer
        class="spare-parts-drawer"
        irection="rtl"
        size="500px"
        :title="drawer.title"
        :drawer="drawer.isShow"
        @save="serviceConfirm"
        @cancelFun="cancelFun"
        @closeDraw="cancelFun"
      >
        <template slot="column">
          <addServiceInfo ref="serviceInfo" :detailShow="detailShow" />
        </template>
      </drawer>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue, Ref, Watch } from 'vue-property-decorator'
import QuickSearch from '@/common/views/advancedSearch/QuickSearch.vue'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import instiutionTable from '@/common/views/institutionTable/institutionTable.vue'
import addServiceInfo from '@/afterSales/views/serviceItem/category/addServiceInfo.vue'
import { ElForm } from 'element-ui/types/form'
import drawer from '@/common/views/drawer/index.vue'
import { commonAction, deepClone } from '@/utils/common'
import { checkPermission } from '@/utils/directive'
@Component({
  name: 'ServiceItemCategory',
  components: {
    QuickSearch,
    continer,
    instiutionTable,
    addServiceInfo,
    drawer
  }
})
export default class Category extends Vue {
  @Ref() private readonly serviceInfo!: addServiceInfo
  @Ref() private readonly tableRef !: instiutionTable
  private $confirm: any
  private $message: any

  private showPage: boolean = false

  private edit: boolean = false

  private tableData = [] // 表格数据

  private detailShow: any = false

  private tableHeader: any[] = [ // 表头
    { label: '服务项目', prop: 'name' },
    { label: '销售价', prop: 'price' },
    { label: '说明', prop: 'description' }
  ]

  private tablePages = { // 表格分页
    current: 1,
    pageSize: 10,
    total: 100
  }

  private quickSearchForm: any = { // 快捷检索数据
    form: {
      item: '',
      preNumber: undefined,
      afterNumber: undefined
    },
    advSearchOptions: [
      { label: '服务项目', inputType: 'input', placeholder: '请输入', name: 'item', clearable: true },
      { label: '销售价', inputType: 'numberRange', placeholder: '请输入', preName: 'preNumber', afterName: 'afterNumber', clearable: true }
    ]
  }

  @Watch('$route', { immediate: true, deep: true })
  private routeChange (to: any, from: any) { // 服务记录详情跳转
    if (to.query.serviceProjectId) {
      this.drawer.isShow = true
      this.detailShow = true
      this.getDetailData(to.query.serviceProjectId)
    }
  }

  private getDetailData (id: any) {
    const params = {
      url: `/server-work/action/serviceProject/${id}`,
      method: 'GET'
    }
    commonAction(params).then(res => {
      if (res.success) {
        this.$nextTick(() => {
          if (this.serviceInfo) {
            this.serviceInfo.accessForm = res.data
            this.serviceInfo.attach = res.data.attach
          }
        })
      }
    })
  }

  private drawer = {
    isShow: false, // 抽屉是否显示
    title: '服务项目信息' // 新建抽屉标题
  }

  private currentChangeFun (page: number) { // 翻页
    this.tablePages.current = page
    this.getTableList()
  }

  private sizeChange (size: number) {
    this.tablePages.pageSize = size
    this.getTableList()
  }

  private handleSearchFun () { // 搜素
    this.tablePages.current = 1
    this.getTableList()
  }

  private getTableList () { // 获取表格数据
    const sendData = {
      limit: this.tablePages.pageSize,
      page: this.tablePages.current,
      serviceTypeName: this.quickSearchForm.form.item,
      priceStart: this.quickSearchForm.form.preNumber,
      priceEnd: this.quickSearchForm.form.afterNumber
    }
    commonAction({
      url: '/server-work/action/serviceProject/list',
      method: 'post',
      data: sendData
    }).then(res => {
      if (res.success && res.data) {
        this.tableData = res.data.list
        this.tablePages.total = res.data.count
      }
    })
  }

  private serviceConfirm () {
    const formRef = this.serviceInfo.$refs.accessForm as ElForm
    const { name, price, description, id } = this.serviceInfo.accessForm
    const sendData = {
      name,
      price,
      description,
      attach: this.serviceInfo.attach
    }
    const actionData = {
      url: this.edit ? '/server-work/action/serviceProject/update' : '/server-work/action/serviceProject/create',
      method: 'post',
      data: this.edit ? { ...sendData, id } : sendData
    }
    formRef.validate(valide => {
      if (valide) {
        commonAction(actionData).then(res => {
          if (res.success) {
            this.$message.success(`${this.edit ? '修改' : '创建'}成功`)
            this.drawer.isShow = false
            this.getTableList()
          }
        })
      }
    })
  }

  private addBtnFun () { // 新增
    this.edit = false
    this.drawer.isShow = true
    this.$nextTick(() => {
      this.serviceInfo.accessForm = {
        name: '',
        price: undefined,
        description: ''
      }
      this.serviceInfo.attach = [] // 清空文件
    })
  }

  private editFun (row: any) {
    this.edit = true
    this.drawer.isShow = true
    this.detailShow = false
    this.$nextTick(() => {
      this.serviceInfo.accessForm = deepClone(row)
      this.serviceInfo.attach = deepClone(row.attach)
    })
  }

  private handleDel (row: any) { // 删除
    this.$confirm('删除此品类可能会影响相关信息的展示，确定要删除吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      commonAction({
        url: '/server-work/action/serviceProject/delete',
        method: 'post',
        data: { id: row.id }
      }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.getTableList()
        }
      })
    })
  }

  private cancelFun () { // 抽屉取消
    this.drawer.isShow = false
  }

  private mounted () {
    let handlers: any[] = []
    if (checkPermission(null, { value: ['service_item_mgt_category_edit'] })) {
      handlers.push({ name: '编辑', handleFn: (scope: any) => this.editFun(scope.row) })
    }
    if (checkPermission(null, { value: ['service_item_mgt_category_delete'] })) {
      handlers = [...handlers, ...[{ className: 'danger', name: '删除', handleFn: (scope: any) => this.handleDel(scope.row) }]
      ]
    };
    this.tableHeader.push({ label: '操作', width: 100, handlers })
    this.getTableList()
  }
}
</script>
<style lang="stylus" scoped>
>>> .el-input-number
  .el-input__inner
    text-align left
</style>
